<template>
  <div class="person">
    姓：<input type="text" v-model="firstName"> <br>
    名：<input type="text" v-model="lastName"> <br>
    全名：<span>{{ fullName }}</span> <br>
    <button @click="changeFullName">全名改为：li-si</button>
  </div>
</template>
<script lang="ts">
export default {
  name: 'Person',
}
</script>
<script setup lang="ts">
import { ref, computed } from 'vue'

let firstName = ref('zhang')
let lastName = ref('san')

// 计算属性——只读取，不修改
/* let fullName = computed(()=>{
  return firstName.value + '-' + lastName.value
}) */


// 计算属性——既读取又修改
let fullName = computed({
  // 读取
  get() {
    return firstName.value + '-' + lastName.value
  },
  // 修改
  set(val) {
    console.log('有人修改了fullName', val)
    firstName.value = val.split('-')[0]
    lastName.value = val.split('-')[1]
  }
})

function changeFullName() {
  fullName.value = 'li-si'
} 
</script>